<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>员工管理</el-breadcrumb-item>
        <el-breadcrumb-item>技能库配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top:0;">
      <div class="hander">技能库配置</div>
      <div class="entirety">
        <div class="left">
          <p>A类技能配置：</p>
          <skillConfigA :ArrData="ArrData" />
        </div>
        <div class="right">
          <p>B类技能配置：</p>
          <skillConfigB :BrrData="BrrData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import skillConfigA from "./skillConfigA.vue";
import skillConfigB from "./skillConfigB.vue";

export default {
  name: "skillConfig",
  components: { skillConfigA, skillConfigB },
  data () {
    return {
      ArrData: [
        //树的数据
        {
          id: "",
          text: "",
          depth: 1,
          skillType: '',
          classifyName: '',//商品名称
          classifySubList: [
            {
              id: "",
              depth: 2,
              skillType: '',
              classifyName: '',
              classifySubList: [
                {
                  depth: 3,
                  skillCode: "",
                  skillName: "",
                  skillType: null,
                  goodsTitle: "",
                  goodsCode: "",
                  classifyName: ''
                }
              ]
            }
          ]
        }
      ],
      BrrData: [
        //树的数据
        {
          id: "",
          text: "",
          depth: 1,
          skillType: '',
          classifyName: '',//商品名称
          classifySubList: [
            {
              id: "",
              depth: 2,
              skillType: '',
              classifyName: '',
              classifySubList: [
                {
                  depth: 3,
                  skillCode: "",
                  skillName: "",
                  skillType: null,
                  goodsTitle: "",
                  goodsCode: "",
                  classifyName: ''
                }
              ]
            }
          ]
        }
      ],
      skillType: ''
    };
  },
  mounted () {
    this.skill()
  },
  methods: {
    skill () {
      this.$http({
        url: '/hssgoodsadmin/skill/fetchSkillList',
      }).then(res => {
        let skillA = res.filter(item => { return item.skillType === 'A' })
        let skillB = res.filter(item => { return item.skillType === 'B' })
        let A = []
        let B = []
        if (res.length == 1) {
          if (res[0].skillType == 'A') {
            A = skillA[0].classifyList
            A.forEach(item => {
              item.classifySubList.forEach(item1 => {
                item1.classifyName = item1.classifySubName
                item1.skillList.forEach(item2 => {
                  item2.classifyName = item2.goodsTitle
                })
                item1.classifySubList = item1.skillList
              })
            })
          } else {
            //B技能
            B = skillB[0].classifyList
            B.forEach(item => {
              item.classifySubList.forEach(item1 => {
                item1.classifyName = item1.classifySubName
                item1.skillList.forEach(item2 => {
                  item2.classifyName = item2.goodsTitle
                })
                item1.classifySubList = item1.skillList
              })
            })
          }
        } else {
          // console.log('A技能和B技能')
          //A技能
          A = skillA[0].classifyList
          A.forEach(item => {
            item.classifySubList.forEach(item1 => {
              item1.classifyName = item1.classifySubName
              item1.skillList.forEach(item2 => {
                item2.classifyName = item2.goodsTitle
              })
              item1.classifySubList = item1.skillList
            })
          })
          //B技能
          B = skillB[0].classifyList
          B.forEach(item => {
            item.classifySubList.forEach(item1 => {
              item1.classifyName = item1.classifySubName
              item1.skillList.forEach(item2 => {
                item2.classifyName = item2.goodsTitle
              })
              item1.classifySubList = item1.skillList
            })
          })
        }

        //A技能
        // let nameSkill = [];
        // A.forEach((a) => {
        //   a.classifySubList.forEach((a1) => {
        //     a1.classifySubList.forEach((a2) => {
        //       nameSkill.push({ skillName: a2.skillName, skillCode: a2.skillCode });
        //     });
        //   });
        // });
        // this.nameSkills = nameSkill
        // this.Askill = nameSkill.filter((i) => {
        //   return i.skillName != null
        // });

        //B技能
        // let namesSkill = [];
        // B.forEach((a) => {
        //   a.classifySubList.forEach((a1) => {
        //     a1.classifySubList.forEach((a2) => {
        //       namesSkill.push({ skillName: a2.skillName, skillCode: a2.skillCode });
        //     });
        //   });
        // });
        // this.namesSkills = namesSkill
        // this.Bskill = namesSkill.filter((i) => {
        //   return i.skillName != null
        // });
        // console.log("arr11,,,,,,,", this.Askill);
        this.ArrData = A
        this.BrrData = B
      })
    }
  }
};
</script>
<style scoped lang="scss">
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.entirety {
  width: 100%;
  // height: 400px;
  background-color: #ebeef1;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  font-size: 16px;
  .left {
    flex: 1;
    background-color: #fff;
    margin-right: 5px;
    padding: 8px;
  }
  .right {
    flex: 1;
    background-color: #fff;
    margin-left: 5px;
    padding: 8px;
  }
}
</style>
